<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar"></div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');
    var rectangle;
    var worldRectangle;
    var polyline;

    function applyAlphaMapMaterial(primitive, scene) {
        Sandcastle.declare(applyAlphaMapMaterial);  // For highlighting in Sandcastle.
        primitive.appearance.material = new Cesium.Material({
            fabric : {
                materials : {
                    alphaMaterial : {
                        type : 'AlphaMap',
                        uniforms : {
                            image : './img/igs/Cesium_Logo_Color.jpg',
                            channel : 'r'
                        }
                    }
                },
                components : {
                    diffuse : 'vec3(1.0)',
                    alpha : 'alphaMaterial.alpha'
                }
            }
        });
    }

    function applyBumpMapMaterial(primitive, scene) {
        Sandcastle.declare(applyBumpMapMaterial);   // For highlighting in Sandcastle.
        primitive.appearance.material = new Cesium.Material({
            fabric : {
                materials : {
                    diffuseMaterial : {
                        type : 'DiffuseMap',
                        uniforms : {
                            image : './img/igs/bumpmap.png'
                        }
                    },
                    bumpMaterial : {
                        type : 'BumpMap',
                        uniforms : {
                            image : './img/igs/bumpmap.png',
                            strength : 0.8
                        }
                    }
                },
                components : {
                    diffuse : 'diffuseMaterial.diffuse',
                    specular : 0.01,
                    normal : 'bumpMaterial.normal'
                }
            }
        });
    }

    function applyCheckerboardMaterial(primitive, scene) {
        Sandcastle.declare(applyCheckerboardMaterial);  // For highlighting in Sandcastle.
        primitive.appearance.material = Cesium.Material.fromType('Checkerboard');
    }

    function applyColorMaterial(primitive, scene) {
        Sandcastle.declare(applyColorMaterial); // For highlighting in Sandcastle.
        primitive.appearance.material = Cesium.Material.fromType('Color');
    }

    function applyCompositeMaterial(primitive, scene) {
        Sandcastle.declare(applyCompositeMaterial);    // For highlighting in Sandcastle.
        primitive.appearance.material = new Cesium.Material({
            fabric: {
                uniforms : {
                    image: './img/igs/earthspec1k.jpg',
                    heightField : './img/igs/earthbump1k.jpg'
                },
                materials: {
                    bumpMap: {
                        type : 'BumpMap',
                        uniforms : {
                            image : './img/igs/earthbump1k.jpg'
                        }
                    }
                },
                source :
                'czm_material czm_getMaterial(czm_materialInput materialInput) { \n' +
                '    czm_material material = czm_getDefaultMaterial(materialInput); \n' +
                '    vec4 color; \n' +
                '    float heightValue = texture2D(heightField, materialInput.st).r; \n' +
                '    color.rgb = mix(vec3(0.2, 0.6, 0.2), vec3(1.0, 0.5, 0.2), heightValue); \n' +
                '    color.a = (1.0 - texture2D(image, materialInput.st).r) * 0.7; \n' +
                '    color = czm_gammaCorrect(color); \n' +
                '    material.diffuse = color.rgb; \n' +
                '    material.alpha = color.a; \n' +
                '    material.normal = bumpMap.normal; \n' +
                '    material.specular = step(0.1, heightValue); \n' + // Specular mountain tops
                '    material.shininess = 8.0; \n' + // Sharpen highlight
                '    return material; \n' +
                '} \n'
            }
        });
    }

    function applyDotMaterial(primitive, scene) {
        Sandcastle.declare(applyDotMaterial);   // For highlighting in Sandcastle.
        primitive.appearance.material = Cesium.Material.fromType('Dot');
    }

    function applyDiffuseMaterial(primitive, scene) {
        Sandcastle.declare(applyDiffuseMaterial);   // For highlighting in Sandcastle.
        primitive.appearance.material = new Cesium.Material({
            fabric : {
                type : 'DiffuseMap',
                uniforms : {
                    image : './img/igs/Cesium_Logo_Color.jpg'
                }
            }
        });
    }

    function applyEmissionMapMaterial(primitive, scene) {
        Sandcastle.declare(applyEmissionMapMaterial);   // For highlighting in Sandcastle.
        primitive.appearance.material = new Cesium.Material({
            fabric : {
                materials : {
                    diffuseMaterial : {
                        type : 'DiffuseMap',
                        uniforms : {
                            image : './img/igs/Cesium_Logo_Color.jpg'
                        }
                    },
                    emissionMaterial : {
                        type : 'EmissionMap',
                        uniforms : {
                            image : './img/igs/checkerboard.png',
                            repeat : {
                                x : 1,
                                y : 0.5
                            }
                        }
                    }
                },
                components : {
                    diffuse : 'diffuseMaterial.diffuse',
                    emission : 'emissionMaterial.emission * 0.2'
                }
            }
        });
    }

    function applyWaterMaterial(primitive, scene) {
        Sandcastle.declare(applyWaterMaterial); // For highlighting in Sandcastle.

        primitive.appearance.material = new Cesium.Material({
            fabric : {
                type : 'Water',
                uniforms : {
                    specularMap: './img/igs/earthspec1k.jpg',
                    normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'),
                    frequency: 10000.0,
                    animationSpeed: 0.01,
                    amplitude: 1.0
                }
            }
        });
    }

    function applyGridMaterial(primitive, scene) {
        Sandcastle.declare(applyGridMaterial); // For highlighting in Sandcastle.
        primitive.appearance.material = Cesium.Material.fromType('Grid');
    }

    function applyImageMaterial(primitive, scene) {
        Sandcastle.declare(applyImageMaterial); // For highlighting in Sandcastle.
        primitive.appearance.material = new Cesium.Material({
            fabric : {
                type : 'Image',
                uniforms : {
                    image : './img/igs/Cesium_Logo_Color.jpg'
                }
            }
        });
    }

    function applyCompressedTextureMaterial(primitive, scene) {
        Sandcastle.declare(applyCompressedTextureMaterial); // For highlighting in Sandcastle.

        var compressedImageUrl;
        if (scene.getCompressedTextureFormatSupported('s3tc')) {
            compressedImageUrl = './img/igs/LogoDXT1.ktx';
        } else if (scene.getCompressedTextureFormatSupported('etc1')) {
            compressedImageUrl = './img/igs/LogoETC1.ktx';
        } else if (scene.getCompressedTextureFormatSupported('pvrtc')) {
            compressedImageUrl = './img/igs/LogoPVR.ktx';
        }

        primitive.appearance.material = new Cesium.Material({
            fabric : {
                type : 'Image',
                uniforms : {
                    image : compressedImageUrl
                }
            }
        });
    }

    function applyNormalMapMaterial(primitive, scene) {
        Sandcastle.declare(applyNormalMapMaterial); // For highlighting in Sandcastle.
        primitive.appearance.material = new Cesium.Material({
            fabric : {
                materials : {
                    diffuseMaterial : {
                        type : 'DiffuseMap',
                        uniforms : {
                            image : './img/igs/bumpmap.png'
                        }
                    },
                    normalMap : {
                        type : 'NormalMap',
                        uniforms : {
                            image : './img/igs/normalmap.png',
                            strength : 0.6
                        }
                    }
                },
                components : {
                    diffuse : 'diffuseMaterial.diffuse',
                    specular : 0.01,
                    normal : 'normalMap.normal'
                }
            }
        });
    }

    function applySpecularMapMaterial(primitive, scene) {
        Sandcastle.declare(applySpecularMapMaterial);   // For highlighting in Sandcastle.
        primitive.appearance.material = new Cesium.Material({
            fabric : {
                type : 'SpecularMap',
                uniforms : {
                    image : './img/igs/Cesium_Logo_Color.jpg',
                    channel : 'r'
                }
            }
        });
    }

    function applyStripeMaterial(primitive, scene) {
        Sandcastle.declare(applyStripeMaterial);    // For highlighting in Sandcastle.
        primitive.appearance.material = Cesium.Material.fromType('Stripe');
    }

    function applyRimLightingMaterial(primitive, scene) {
        Sandcastle.declare(applyRimLightingMaterial);  // For highlighting in Sandcastle.
        primitive.appearance.material = Cesium.Material.fromType('RimLighting');
    }

    function applyPolylineArrowMaterial(primitive, scene) {
        Sandcastle.declare(applyPolylineArrowMaterial);  // For highlighting in Sandcastle.
        var material = Cesium.Material.fromType('PolylineArrow');
        primitive.material = material;
    }

    function applyPolylineGlowMaterial(primitive, scene) {
        Sandcastle.declare(applyPolylineGlowMaterial);  // For highlighting in Sandcastle.
        var material = Cesium.Material.fromType('PolylineGlow', {
            innerWidth : primitive.width / 2.0
        });
        primitive.material = material;
    }

    function applyPolylineOutlineMaterial(primitive, scene) {
        Sandcastle.declare(applyPolylineOutlineMaterial);  // For highlighting in Sandcastle.
        var material = Cesium.Material.fromType('PolylineOutline', {
            outlineWidth : primitive.width / 2.0
        });
        primitive.material = material;
    }

    function createButtons(scene) {
        function toggleRectangleVisibility() {
            rectangle.show = true;
            worldRectangle.show = false;
            polyline.show = false;
        }

        function toggleWorldRectangleVisibility() {
            worldRectangle.show = true;
            rectangle.show = false;
            polyline.show = false;
        }

        function togglePolylineVisibility() {
            polyline.show = true;
            worldRectangle.show = false;
            rectangle.show = false;
        }

        Sandcastle.addToolbarMenu([{
            text : 'Common materials'
        }, {
            text : 'Color',
            onselect : function() {
                toggleRectangleVisibility();
                applyColorMaterial(rectangle, scene);
                Sandcastle.highlight(applyColorMaterial);
            }
        }, {
            text : 'Image',
            onselect : function() {
                toggleRectangleVisibility();
                applyImageMaterial(rectangle, scene);
                Sandcastle.highlight(applyImageMaterial);
            }
        }, {
            text : 'Compressed Image',
            onselect : function() {
                toggleRectangleVisibility();
                applyCompressedTextureMaterial(rectangle, scene);
                Sandcastle.highlight(applyCompressedTextureMaterial);
            }
        }]);

        Sandcastle.addToolbarMenu([{
            text : 'Procedural textures'
        }, {
            text : 'Checkerboard',
            onselect : function() {
                toggleRectangleVisibility();
                applyCheckerboardMaterial(rectangle, scene);
                Sandcastle.highlight(applyCheckerboardMaterial);
            }
        }, {
            text : 'Dot',
            onselect : function() {
                toggleRectangleVisibility();
                applyDotMaterial(rectangle, scene);
                Sandcastle.highlight(applyDotMaterial);
            }
        }, {
            text : 'Grid',
            onselect : function() {
                toggleRectangleVisibility(rectangle, worldRectangle);
                applyGridMaterial(rectangle, scene);
                Sandcastle.highlight(applyGridMaterial);
            }
        }, {
            text : 'Stripe',
            onselect : function() {
                toggleRectangleVisibility();
                applyStripeMaterial(rectangle, scene);
                Sandcastle.highlight(applyStripeMaterial);
            }
        }]);

        Sandcastle.addToolbarMenu([{
            text : 'Base materials'
        }, {
            text : 'Alpha Map',
            onselect : function() {
                toggleRectangleVisibility();
                applyAlphaMapMaterial(rectangle, scene);
                Sandcastle.highlight(applyAlphaMapMaterial);
            }
        }, {
            text : 'Bump Map',
            onselect : function() {
                toggleRectangleVisibility();
                applyBumpMapMaterial(rectangle, scene);
                Sandcastle.highlight(applyBumpMapMaterial);
            }
        }, {
            text : 'Diffuse',
            onselect : function() {
                toggleRectangleVisibility();
                applyDiffuseMaterial(rectangle, scene);
                Sandcastle.highlight(applyDiffuseMaterial);
            }
        }, {
            text : 'Emission Map',
            onselect : function() {
                toggleRectangleVisibility();
                applyEmissionMapMaterial(rectangle, scene);
                Sandcastle.highlight(applyEmissionMapMaterial);
            }
        }, {
            text : 'Normal Map',
            onselect : function() {
                toggleRectangleVisibility();
                applyNormalMapMaterial(rectangle, scene);
                Sandcastle.highlight(applyNormalMapMaterial);
            }
        }, {
            text : 'Specular Map',
            onselect : function() {
                toggleRectangleVisibility();
                applySpecularMapMaterial(rectangle, scene);
                Sandcastle.highlight(applySpecularMapMaterial);
            }
        }]);

        Sandcastle.addToolbarMenu([{
            text : 'Misc materials'
        }, {
            text : 'Rim Lighting',
            onselect : function() {
                toggleWorldRectangleVisibility();
                applyRimLightingMaterial(worldRectangle, scene);
                Sandcastle.highlight(applyRimLightingMaterial);
            }
        }, {
            text : 'Water',
            onselect : function() {
                toggleWorldRectangleVisibility();
                applyWaterMaterial(worldRectangle, scene);
                Sandcastle.highlight(applyWaterMaterial);
            }
        }]);

        Sandcastle.addToolbarMenu([{
            text : 'Example composite materials'
        }, {
            text : 'Composite Example',
            onselect : function() {
                toggleWorldRectangleVisibility();
                applyCompositeMaterial(worldRectangle, scene);
                Sandcastle.highlight(applyCompositeMaterial);
            }
        }]);

        Sandcastle.addToolbarMenu([{
            text : 'Polyline materials'
        }, {
            text : 'Polyline Arrow',
            onselect : function() {
                togglePolylineVisibility();
                applyPolylineArrowMaterial(polyline, scene);
                Sandcastle.highlight(applyPolylineArrowMaterial);
            }
        }, {
            text : 'Polyline Glow',
            onselect : function() {
                togglePolylineVisibility();
                applyPolylineGlowMaterial(polyline, scene);
                Sandcastle.highlight(applyPolylineGlowMaterial);
            }
        }, {
            text : 'Polyline Outline',
            onselect : function() {
                togglePolylineVisibility();
                applyPolylineOutlineMaterial(polyline, scene);
                Sandcastle.highlight(applyPolylineOutlineMaterial);
            }
        }]);

        document.getElementById('toolbar').style.width = '10%';
    }

    function createPrimitives(scene) {
        rectangle = scene.primitives.add(new Cesium.Primitive({
            geometryInstances : new Cesium.GeometryInstance({
                geometry : new Cesium.RectangleGeometry({
                    rectangle : Cesium.Rectangle.fromDegrees(-120.0, 20.0, -60.0, 40.0),
                    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
                })
            }),
            appearance : new Cesium.EllipsoidSurfaceAppearance({
                aboveGround : false
            })
        }));

        worldRectangle = scene.primitives.add(new Cesium.Primitive({
            geometryInstances : new Cesium.GeometryInstance({
                geometry : new Cesium.RectangleGeometry({
                    rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
                    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
                })
            }),
            appearance : new Cesium.EllipsoidSurfaceAppearance({
                aboveGround : false
            }),
            show : false
        }));

        var polylines = scene.primitives.add(new Cesium.PolylineCollection());
        polyline = polylines.add({
            positions : Cesium.PolylinePipeline.generateCartesianArc({
                positions : Cesium.Cartesian3.fromDegreesArray([-110.0, 42.0,
                    -85.0, 36.0,
                    -100.0, 25.0,
                    -77.0, 12.0])
            }),
            width : 10.0,
            show : false
        });
    }
    var scene = viewer.scene;

    createPrimitives(scene);
    createButtons(scene);

</script>
</body>
</html>